@import '~styles/settings.scss';
$subnav-height: rem(60px);

.c-subnav-menu {
  background-color: $grey-light;
  height: $subnav-height;
  width: 100%;

  .buttons {
    height: $subnav-height;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    padding: 0 $mobile-gutter;
    max-width: $max-width;
    margin: auto;

    @media screen and (min-width: $screen-m) {
      justify-content: flex-start;
      padding: 0 $desktop-gutter;
    }

    li {
      width: 100%;
      height: 100%;
      cursor: pointer;
      border-right: 1px solid rgba($slate, 0.2);

      @media screen and (min-width: $screen-m) {
        max-width: rem(180px);
      }

      > * {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;

        .button-wrapper {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &.active {
          background-color: $white;
        }

        svg {
          margin-right: rem(5px);
        }

        span {
          margin-top: rem(3px);
        }
      }

      &:first-child {
        border-left: 1px solid rgba($slate, 0.2);
      }
    }
  }
}
